<template>
	<view class="page-cont" :style="themeStore.theme">
		<navbar title="冷间温度"></navbar>
		<scroll-view class="main-cont" scroll-y :style="{height: pageHeight}">
			<!-- 冷间切换 -->
			<view class="device-select" @click="handleOpen">
				<view class="device-name">{{deviceName}}</view>
				<image class="device-arrow" :src="isOpen ? '/static/up_black.png' : '/static/down_black.png'"></image>
			</view>
			<!-- 折线 -->
			<view class="chart-box">
				<view class="chart-header">
					<view class="chart-header-title">全天24小时折线图(上下限)</view>
					<image class="chart-header-fullscreen" src="/static/fullscreen.png" @click="handleFullscreen">
					</image>
				</view>
				<SettingChart :settingData="pointData" :chartTitle="chartTitle"></SettingChart>
				<!-- <SettingChart :chartTitle="chartTitle"></SettingChart> -->
			</view>
			<!-- 表格 -->
			<view class="table-cont">
				<uni-table stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center">开始时间</uni-th>
						<uni-th align="center">结束时间</uni-th>
						<uni-th align="center">上限</uni-th>
						<uni-th align="center">下限</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in pointData" :key="index" @tap="toAdd(0,item)">
						<uni-td align="center">{{item.starttime}}</uni-td>
						<uni-td align="center">{{item.endtime}}</uni-td>
						<uni-td align="center">{{item.startvalue || 0}}</uni-td>
						<uni-td align="center">{{item.endvalue || 0}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			<!-- 按钮 -->
			<view class="btn-cont">
				<view class="btn-update" @click="handleUpdate">点位信息</view>
			</view>
		</scroll-view>
		<!-- 弹框选择项目 -->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in deviceList" :key="index"
					@click="handleDeviceChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, watch, getCurrentInstance } from 'vue';
	import { onShow, onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { storeToRefs } from 'pinia';
	import { useNavbar } from "@/utils/hooks.js";
	import { getDataHistory, getProjectConfList } from "@/api/home.js";
	import useHomeStore from '@/store/home';
	import useThemeStore from '@/store/theme';
	import SettingChart from "./components/setting-chart.vue"
	const themeStore = useThemeStore();
	const homeStore = useHomeStore();
	const { proxy } = getCurrentInstance();
	const { pageHeight } = useNavbar();
	const { projectId, deviceId, deviceName, deviceType, deviceList, projectModus, projectType } = storeToRefs(homeStore);
	const popup = ref()
	const isOpen = ref(false)
	const datamapping = ref("")
	const currentTime = ref("")
	const chartData = ref([])
	const pointData = ref([])
	const chartTitle = ref('温度')

	onLoad(() => {
		
		currentTime.value = proxy.dayjs().format("YYYY-MM-DD");
		deviceList.value.forEach(element => {
			if (element.id == deviceId.value) {
				datamapping.value = element.datamapping;
			}
		});
		// getList();
		getConfigList();
	});


	uni.$on('point-refresh-list', () => {
		getConfigList()
	})

	// 获取列表数据
	function getList() {
		const startTime = proxy.dayjs(currentTime.value).startOf('day').format("YYYY-MM-DD HH:mm:ss");//当月的第一天
		const endTime = proxy.dayjs(currentTime.value).endOf('day').format("YYYY-MM-DD HH:mm:ss");//当月的最后一天
		let params = {
			keys: [datamapping.value],
			startTime: startTime,
			endTime: endTime
		};
		getDataHistory(params).then(res => {
			chartData.value = [];
			let arr = res[datamapping.value];
			if (arr && arr.length) {
				arr.forEach(element => {
					if (element && element.length) {
						chartData.value.push({
							time: proxy.dayjs(element[0]).format("HH:mm"),
							num: element[1],
						});
					}
				});
			}
		});
	}

	// 获取项目配置列表
	function getConfigList() {
		let params = {
			mid: projectId.value,//项目id
			type: projectType.value,//项目模块
			oid: deviceId.value,
		}
		getProjectConfList(params).then(res => {
			pointData.value = res.data
		});
	}

	// 下拉选择设备
	function handleOpen() {
		isOpen.value = true;
		popup.value.open();
	}
	// 设备切换
	function handleDeviceChange(item) {
		isOpen.value = false;
		popup.value.close();
		homeStore.setDeviceId(item.id);
		homeStore.setDeviceName(item.name);
		getConfigList();
	}
	// 全屏
	function handleFullscreen(e) {
		uni.navigateTo({
			url: `/pages/home/detail-chart-landscape?type=1`
		});
	}
	// 修改温度上下限
	function handleUpdate() {
		uni.navigateTo({
			// url: '/pages/home/setting'
			url: '/pages/home/point'
		});
	}
	
	const toAdd = (type, ponit) => {
		if (ponit) {
			homeStore.setPointInfo(ponit)
		}
		uni.navigateTo({
			url: `/pages/home/point-detail?type=${type}`
		})
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			position: relative;
			padding-bottom: 80px;
		}

		.device-select {
			height: 40px;
			line-height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border-bottom: 1px solid #ccc;

			.device-name {
				color: #666;
				font-size: 14px;
			}

			.device-arrow {
				padding-left: 10px;
				width: 16px;
				height: 16px;
			}
		}

		.table-cont {
			margin-top: 10px;
			padding: 10px;
			border-radius: 5px;
			background-color: #fff;
			box-sizing: border-box;

			::v-deep .uni-table {
				min-width: 300px !important;
			}

			::v-deep .uni-table-th {
				padding: 6px 10px !important;
				width: 25% !important;
				background-color: #F2F3F9;
			}

			::v-deep .uni-table-td {
				color: #6E84A2;
				font-size: 13px;
			}
		}

		.chart-box {
			margin-top: 10px;
			border-radius: 5px;
			background-color: #fff;
		}

		.chart-header {
			padding: 0 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.chart-header-title {
				color: #333;
				font-size: 14px;
				font-weight: 600;
			}

			.chart-header-fullscreen {
				padding: 10px;
				width: 40px;
				height: 40px;
				box-sizing: border-box;
			}
		}

		.btn-cont {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 10px;

			.btn-update {
				height: 50px;
				line-height: 50px;
				color: #fff;
				font-size: 14px;
				text-align: center;
				border-radius: 5px;
				// background-color: #F4B140;
				background-color: $theme-color;
			}
		}
	}

	.popup-cont {
		background: #fff;
		max-height: 80vh;

		.popup-title,
		.popup-header {
			height: 50px;
			line-height: 50px;
			color: #333;
			font-size: 14px;
			text-align: center;
			border-top: 1px solid #eee;
		}

		.popup-header {
			font-size: 16px;
			font-weight: 600;
		}
	}
</style>